<template>
	<view>
		<view class="" style="height: 100%;">
			<z-paging ref="paging" v-model="listData" @query="queryList" :auto-show-system-loading="true" :loading-more-custom-style="{
				paddingBottom: '200rpx',
				paddingTop: '50rpx'
			}">
				<view slot="top">
					<view class="cu-bar search padding-tb-sm bg-white">
						<view class="search-form round padding-lr" style="background-color: #f2f2f2;height: 40px;">
							<input style="height: 40px;" @confirm="searchConfirm" :adjust-position="false" type="text" placeholder="请输入设备名称" confirm-type="search"></input>
							<uni-icons class="margin-left-xs" type="search" size="19"></uni-icons>
						</view>
					</view>
				</view>
				<block v-for="(value, index) in listData" :key="index">
					<view class="padding padding-tb-xl bg-white margin-tb" style="color: #2E475E;" @click="goDetail(value.deviceId)">
                        <view class="flex">
                            <view>
                                <image class="cu-avatar lg" :src="imageUrl + value.productImg"></image>
                            </view>
                            <view class="margin-left-sm">
                                <view class="flex justify-between">
                                    <view class="flex align-center">
                                        <view class="margin-right-sm text-lg text-bold">{{ value.deviceName }}</view>
                                        <view class="cu-tag radius sm" :class="value.lineStatus ? 'bg-blue' : ''">{{ value.lineStatus ? '在线' : '离线' }}</view>
                                    </view>
                                    <view class="margin-left-xs">
                                        <image class="cu-avatar sm" style="background-color: transparent;" v-if="value.lineStatus == 0" src="@/static/images/off_line.png"></image>
                                        <image class="cu-avatar sm" style="background-color: transparent;"  v-if="value.lineStatus == 1" src="@/static/images/on_line.gif"></image>
                                    </view>
                                </view>
                                <view class="flex align-center justify-between margin-top-sm">
                                    <view class="flex">
									    <uni-icons class="margin-right-xs" type="shop" size="21" color="#515151"></uni-icons>
                                        <view class="text-cut" style="width:190upx">{{ value.buildingName }}</view>
                                    </view>
                                    <view class="text-xs margin-left-sm text-grey">
                                        最近数据上传时间: {{ value.createTime }}
                                    </view>
                                </view>
                                <view class="margin-top-sm flex">
									<uni-icons class="margin-right-xs" type="location" size="21" color="#515151"></uni-icons>
                                    {{ value.address }}
                                </view>
                            </view>
                        </view>
					</view>
				</block>
			</z-paging>
		</view>
	</view>
</template>

<script>
    import { buildingDevicePage } from "@/api/devices/index"
	import { parseTime } from "@/utils/ruoyi"
    import config from '@/config'
	export default {
		data() {
			return {
                imageUrl: config.imageUrl,
                buildingId: 0,
				listData: [],
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pageNo: 1,
				pageSize: 10,
				searchValue: '',
				currentOperationID: '',
				windowTop: 0,
			};
		},
		onLoad(e) {
            this.buildingId = e.buildingId
			var that = this
			uni.getSystemInfo({
				success: function (res) {
					// 标题栏高度
					that.windowTop = res.windowTop
				}
			});
		},
		methods: {
			searchConfirm(e) {
				this.searchValue = e.target.value
				this.$refs.paging.refresh()
			},
			parseTime(time) {
				return parseTime(time)
			},
			queryList(query){
				buildingDevicePage({
					pageNo: query,
					pageSize: this.pageSize,
					deviceName: this.searchValue,
                    buildingId: this.buildingId
				}).then(response => {
				  this.$refs.paging.complete(response.data.list);
				})
			},
			goDetail: function(e) {
				this.$tab.navigateTo('/pages/devices/detail/index?deviceId='+e)
			},
		}
	};
</script>

<style lang="scss">
	.top-search {
		width: 100%;
		background-color: #F1F1F1;
		z-index:99;
		position: fixed;
	}
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.rotate {
	   transform: rotate(-90deg);
	}
	.building {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100upx;
		height: 100upx;
		border: 1px solid #2667FF;
		border-radius: 50upx;
	}
	.bottom-popup {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}
</style>
